<template>
    <div class="search">
            <van-search
                v-model="searchValue"
                show-action
                background="#254000"
                placeholder="请输入搜索关键词"
                @keydown.enter.stop="search"
                @update:model-value="changeValue"
                @click-left-icon="search"
                shape="round"
            >
            <template #action>
                <div @click="toHome" style="color:white;">返回</div>
            </template>
            </van-search>
            <div class="history-search" v-if="state">
                <ul>
                    <li 
                    v-for="item in historySearch" 
                    :key="item.id"
                   
                    >
                        <span></span>
                        <span class="text"  @click="hisSearch(item.id)">{{ item.title }}</span>
                        <span @click="del(item.id)" class="delete">&times;</span>
                    </li>
                </ul>
                <span @click="clear">清空历史记录</span>
            </div>


            <div class="search-result" v-else>
                <van-card
                    v-for="item in searchResult"
                    :key="item.id"
                    :price="item.price"
                    :title="item.title"
                    :thumb="item.image"
                    />
             </div>
    </div>
</template>


<script setup>
import { computed,ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { showFailToast } from 'vant';


const store = useStore()
const router = useRouter()

let searchValue = ref('')
let state = ref(true)
//搜索结果
let searchResult = computed(()=>store.getters['homeModule/getSearchResult'])

//历史搜索
let historySearch = computed(()=>store.getters['homeModule/getHistorySearch'])

function toHome(){
    router.push('/')
}

function changeValue(){
   if(searchValue.value === ''){
    state.value = true
   }
}

//搜索
function search(){
   store.commit('homeModule/changeAllGoods',searchValue.value)
   let index = historySearch.value.findIndex(item => item.title === searchValue.value)
   if(index === -1){
    store.commit('homeModule/addHistory',{id:Math.random(),title:searchValue.value})
   }else{
    store.commit('homeModule/updatedHistory',index)
    store.commit('homeModule/addHistory',{id:Math.random(),title:searchValue.value})
   }
    if(searchResult.value.length > 0){
        state.value = false
    }else{
        showFailToast('没有找到该商品哦')
    }
}
//点击历史搜索事件
function hisSearch(id){
    let val = historySearch.value.filter(item => item.id === id)
    searchValue.value = val[0].title
}
//删除单个历史搜索
function del(id){
    store.commit('homeModule/delHistory',id)
}
//清空历史搜索
function clear(){
    store.commit('homeModule/clearHistory')
}
</script>


<style lang="less" scoped>
@import "../../style/common.less";
.search{
    width: 100vw;
    height: 100vh;
    background: @g4;
    >.history-search{
        >ul{
            >li{
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: @g1;
                margin-bottom: 2px;
                padding: 5px 30px 5px 10px;
                >.text{
                    color: @g8;
                    font-size: .8rem;
                }
                >.delete{
                    font-size: 1.2rem;
                    color: @g8;
                }
            }
        }
        >span{
            display: block;
            margin: 30px auto;
            text-align: center;
            border: 1px solid @g9;
            width: 66%;
            height: 40px;
            line-height: 40px;
            border-radius: 6px;
            background: @c9;
            color: @g1;
        }
    }
    
}
</style>